<template>
  <div class="top-toolbar">
    <div class="left-toolbar">
      <el-button
        type="text"
        :disabled="toolbar.undo"
        title="撤销"
        @click="designer.undoHistoryStep()"
      >
        <svg-icon icon-class="undo" />
      </el-button>
      <el-button
        type="text"
        :disabled="toolbar.redo"
        title="撤销"
        @click="designer.redoHistoryStep()"
      >
        <svg-icon icon-class="redo" />
      </el-button>
      <el-button-group style="margin-left: 20px">
        <el-button
          size="small"
          :type="layoutType === 'PC' ? 'info' : ''"
          @click="() => designer.changeLayoutType('PC')"
        >
          PC
        </el-button>
        <el-button
          size="small"
          :type="layoutType === 'H5' ? 'info' : ''"
          @click="() => designer.changeLayoutType('H5')"
        >
          H5
        </el-button>
      </el-button-group>
      <el-button
        type="small"
        style="margin-left: 20px"
        title="表单结构树"
        @click="$refs.NodeTree.show()"
      >
        <svg-icon icon-class="node-tree" />
      </el-button>
      <NodeTreeDrawer ref="NodeTree" :designer="designer" />
    </div>
    <div>
      <el-button
        type="primary"
        icon="el-icon-upload"
        size="small"
        @click="designer.saveForm()"
      >
        保存
      </el-button>
      <el-button
        type="success"
        icon="el-icon-view"
        size="small"
        plain
        @click="designer.previewForm()"
      >
        预览
      </el-button>
    </div>
    <div class="right-toolbar">
      <el-button
        type="text"
        icon="el-icon-delete"
        @click="designer.clearDesigner()"
      >
        清空
      </el-button>
      <el-button type="text" @click="$refs.ImportJson.show()">
        导入JSON
      </el-button>
      <el-button type="text" @click="$refs.ExportJson.show()">
        导出JSON
      </el-button>
    </div>
    <ImportJsonDialog ref="ImportJson" :designer="designer" />
    <ExportJsonDialog ref="ExportJson" :designer="designer" />
  </div>
</template>

<script>
/* eslint-disable vue/require-default-prop */
/* eslint-disable eol-last */
// import { deepClone } from "@/utils";
import SvgIcon from "Yan/components/svg-icon";
import NodeTreeDrawer from "./component/NodeTreeDrawer.vue";
import ImportJsonDialog from "./component/ImportJsonDialog.vue";
import ExportJsonDialog from "./component/ExportJsonDialog.vue";
export default {
  components: {
    SvgIcon,
    NodeTreeDrawer,
    ImportJsonDialog,
    ExportJsonDialog,
  },
  props: {
    designer: { type: Object, default: () => {} },
  },
  data() {
    return {
      toolList: [],
      // layoutType:
    };
  },
  computed: {
    toolbar() {
      return this.designer.toolbar || {};
    },
    layoutType() {
      return this.designer.getLayoutType();
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.top-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
}
.left-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 1;
}

::v-deep {
  .right-toolbar {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    overflow: hidden;
    flex: 1;

    .el-button--text {
      font-size: 14px !important;
    }
  }
}
</style>